<template>
    <div class="wrap">
      <div class="item" v-for="x in list" @click="jump('panicDetails')">
          <div class="itemTop" v-show="x.isPanic">
            <div class="top_left">
              <img src="../../../../static/img/huomiao.png" alt="">
              <span>正在抢购</span>
              <span>先到先得，赶紧抢货</span>
            </div>
            <div class="top_right">
              <span>距离结束</span>
              <div><p>00</p>:<p>00</p>:<p>00</p></div>
            </div>
          </div>
          <div class="box">
            <img :src="x.url" alt="">
            <div class="box_right">
                <div class="name">{{x.name}}</div>
                <div class="info">{{x.info}}</div>
                <el-progress :percentage="x.progress" :format="format" :stroke-width="6" color="#FF6E00"></el-progress>
                <div class="money">
                    <p><span style="font-size: .11rem">￥</span>{{x.money}}&nbsp;<span>￥{{x.num}}</span></p>
                    <p>立即抢购</p>
                </div>
            </div>
          </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "panicBuyAll",
        data(){
          return {
            list:[{url:'../../../../static/img/shop7.png',name:'麻辣小龙虾选套餐',info:'火锅料理包精选组 1包装*500G',progress:65,money:98.6,num:120,isPanic:true},{url:'../../../static/img/shop8.png',name:'麻辣小龙虾选套餐',info:'火锅料理包精选组 1包装*500G',progress:50,money:98.6,num:120,isPanic:false},{url:'../../../../static/img/shop7.png',name:'麻辣小龙虾选套餐',info:'火锅料理包精选组 1包装*500G',progress:100,money:98.6,num:120,isPanic:true},{url:'../../../../static/img/shop8.png',name:'麻辣小龙虾选套餐',info:'火锅料理包精选组 1包装*500G',progress:80,money:98.6,num:120,isPanic:false},]
          }
        },
        methods:{
          format(percentage) {
            return percentage === 100 ? '已抢空' : `已抢${percentage}%`;
          },
          jump(page){
            this.$router.push({
              name:page
            })
          }
        }
    }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 5.87rem;
    box-sizing: border-box;
    background-color: #F5F5F5;
    position: relative;
    padding: .1rem;
  }

  .item {
    width: 100%;
    background:rgba(255,255,255,1);
    border-radius:.05rem;
    padding-top: .15rem;
    margin-bottom: .1rem;
  }
  .itemTop {
    width: 100%;
    height: .2rem;
    box-sizing: border-box;
    padding: 0 .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .15rem;
  }
  .top_left {
    width: 60%;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
  .top_left>img {
    width: .12rem;
    height: .15rem;
    margin-right: .05rem;
  }
  .top_left>span:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    padding-right: .1rem;
  }
  .top_left>span:nth-child(3) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #666666;
  }
  .top_right {
    display: flex;
    width: 40%;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }
  .top_right>span:nth-child(1) {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  .top_right>div {
    color: #FF7611;
    font-size: .09rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-left: .05rem;
  }
  .top_right>div>p {
    background-color: #FF7611;
    margin: 0 .02rem;
    color: #ffffff;
    border-radius: .02rem;
    width:.14rem;
    height:.14rem;
    text-align: center;
    line-height: .14rem;
  }

  .box {
    width: 100%;
    height: 1.21rem;
    box-sizing: border-box;
    padding: .15rem .12rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
  }
  .box>img:nth-child(1) {
    width: 1.06rem;
    height: 100%;
    margin-right: .1rem;
  }
  .box_right {
    height: 100%;
    width: calc(100% - 1.16rem);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  /deep/ .el-progress-bar__outer {
    background-color: #FFD9D9 !important;
    border-radius: 1rem;
    height: .06rem !important;
  }
  >>> .el-progress-bar__inner {
    border-radius: 1rem;
  }
  /deep/ .el-progress-bar {
    width: 92%;
    padding-right: .5rem;
    margin-right: -.55rem;
  }
  /deep/ .el-progress__text {
    font-size:.1rem !important;
    color: #FF6F03;
    font-family:PingFang SC;
    font-weight:400;
    margin-left: .2rem;
  }

  .name {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .info {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .money {
    width: 100%;
    height: .3rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .money>p:nth-child(1) {
    font-size:.21rem;
    font-family:Source Han Sans CN;
    font-weight:400;
    color: #FF1D42;
  }
  .money>p:nth-child(1)>span:nth-child(2){
    font-size: .11rem;
    color: #808080;
    text-decoration: line-through;
  }
  .money>p:nth-child(2){
    width:.77rem;
    height:.3rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.15rem;
    text-align: center;
    line-height: .3rem;
    color: #ffffff;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
  }
</style>
